<template>
  <div>
    <r-table :tableHandles="tableHandles" :isSelection="false" :isPagination="true" :tableData="tableData"
      :tableCols="tableCols" :tablePage="tablePage" :isHandle="true" @refresh="init()"></r-table>
    <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm"
      labelWidth="200px" dialogWidth="1000px" :isHandle="true" />

    <!-- 点击编辑按钮打开的模板  formRules2提示框  formHandle2编辑页面的模板菜单   formHandle2取消与确认按钮 formData2编辑页面菜单的数据源-->
    <r-form labelWidth="150px" :isHandle="true" :formRules="formRules2" :formCols="formCols2" :formHandle="formHandle2"
      :formData="formData2" ref="elForm2" :inline="false" dialogWidth="850px">
    </r-form>
    <!-- 导入使用详情按钮的模板 -->
    <ChildEquipment_alarm :visible.sync="visible" :useDetail="useDetail"></ChildEquipment_alarm>
  </div>
</template>
<script>
import ChildEquipment_alarm from "./cus/ChildEquipment_alarm.vue";

export default {
  components: {
    ChildEquipment_alarm,//设备警报详情按钮
  },
  data() {

    return {
      isNewAlarm: true,//控制编辑页面的设备id
      visible: false,//控制详情按钮的显示隐藏
      // 表单中 详情按钮的数据
      useDetail: {
        id: "", //设备专属身份ID
        deviceNo: "",//设备id
        fire: 0,//消防警报
        lightning: 0,//雷击警报
        maintainDoor: 0,//维修门状态
        smoke: 0,//烟感警报
        urgencyStop: 0,//急停警报
        water: 0,//浸水警报

      },

      searchData: {
        deviceNo: "",
      },


      //新增设备警告信息按钮
      tableHandles: [
        {
          label: "新增设备警告信息",
          type: "primary",
          handle: (e) => {
            this.formData2.id = null;
            this.isNewAlarm = false;
            this.add();

          },
        },
      ],

      tableData: [], //接收后端
      // 表格信息
      tableCols: [
        {
          label: "设备ID",
          prop: "deviceNo",
        },
        {
          label: "上报时间",
          width: 150,
          prop: "stime",
        },
        {
          label: "维修门状态",
          width: 120,
          prop: "maintainDoor",
          itemClass: e => (e.maintainDoor == 0 ? 'success' : e.maintainDoor !== 0 ? 'danger' : ''),
          formatter: (e) => {
            if (e.maintainDoor == 0) {
              return "关闭";

            } else {
              return "开启";
            }
          },
        },
        {
          label: "雷击警报",
          prop: "lightning",
          itemClass: e => (e.lightning == 0 ? 'success' : e.lightning !== 0 ? 'danger' : ''),
          formatter: (e) => {
            if (e.lightning == 0) {
              return "正常";

            } else {
              return "报警";
            }
          },
        },
        {
          label: "消防警报",
          prop: "fire",
          itemClass: e => (e.fire == 0 ? 'success' : e.fire !== 0 ? 'danger' : ''),
          formatter: (e) => {
            if (e.fire == 0) {
              return "正常";

            } else {
              return "报警";
            }
          },
        },
        {
          label: "烟感警报",
          prop: "smoke",
          itemClass: e => (e.smoke == 0 ? 'success' : e.smoke !== 0 ? 'danger' : ''),
          formatter: (e) => {
            if (e.smoke == 0) {
              return "正常";

            } else {
              return "报警";
            }
          },
        },
        {
          label: "浸水警报",
          prop: "water",
          itemClass: e => (e.water == 0 ? 'success' : e.water !== 0 ? 'danger' : ''),
          formatter: (e) => {
            if (e.water == 0) {
              return "正常";

            } else {
              return "报警";
            }
          },
        },
        {
          label: "急停警报",
          prop: "urgencyStop",
          itemClass: e => (e.urgencyStop == 0 ? 'success' : e.urgencyStop !== 0 ? 'danger' : ''),
          formatter: (e) => {
            if (e.urgencyStop == 0) {
              return "正常";

            } else {
              return "报警";
            }
          },
        },
        {
          label: "操作",
          type: "button",
          width: 350,
          btnList: [
            {
              label: "详情",
              type: "success",
              icon: "el-icon-folder-opened",
              handle: async (row) => {
                const res = await this.apis.getDeviceWarningss(row.id);
                this.useDetail.deviceNo = row.deviceNo,
                  this.useDetail.fire = row.fire,
                  this.useDetail.lightning = row.lightning,
                  this.useDetail.maintainDoor = row.maintainDoor,
                  this.useDetail.smoke = row.smoke,
                  this.useDetail.urgencyStop = row.urgencyStop,
                  this.useDetail.water = row.water,
                  this.useDetail.id = row.id,
                  this.visible = true;
                console.log(res);
              },
            },
            {
              label: "编辑",
              type: "primary",
              icon: "el-icon-edit",
              handle: (row) => this.add(row),
            },
            {
              label: "删除",
              type: "danger",
              icon: "el-icon-delete",
              handle: async (row) => {
                this.$confirm("确定要删除吗?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then(async () => {
                    var res = await this.apis.delDeviceWarning(row.id, {});
                    this.$message({
                      type: "success",
                      message: "删除成功!",
                    });
                    this.init();
                  })
                  .catch(() => { });
              },
            },
          ],
        },
      ],
      // 分页 每页的条数 总页数  总条数
      tablePage: { limit: 10, page: 1, total: 0 },

      formData: {
        name: "",
        money: "",
        giftMoney: "",
        status: "",
      },
      formCols: [
        { type: "input", label: "套餐名称", width: 350, prop: "name" },
        {
          type: "input",
          label: "套餐金额",
          width: 350,
          prop: "money",
          remark: "元",
        },
        {
          type: "input",
          label: "赠送金额",
          width: 350,
          prop: "giftMoney",
          remark: "元",
        },
        { type: "switch", label: "上线/下线", width: 350, prop: "status" },
      ],
      formRules: {
        name: [{ required: true, message: "请输入套餐名称", trigger: "blur" }],
        money: [{ required: true, message: "请输入套餐金额", trigger: "blur" }],
        giftMoney: [
          { required: true, message: "请输入套餐金额", trigger: "blur" },
        ],
      },
      // 取消与确认按钮
      formHandle: [
        {
          label: "取消",
          handle: (e) => this.elFormVisible(),
        },
        {
          label: "确定",
          type: "success",
          handle: (e) => this.elFormSubmit(),
        },
      ],

      // 点击编辑按钮出现的表单的 参数
      formData2: {
        id: "", //设备专属身份ID
        deviceNo: "",//设备id
        // fire: 0 ? '异常' : '正常',//消防警报
        // lightning: 0 ? '异常' : '正常',//雷击警报
        // maintainDoor: 0 ? '开启' : '关闭',//维修门状态
        // smoke: 0 ? '异常' : '正常',//烟感警报
        // urgencyStop: 0 ? '异常' : '正常',//急停警报
        // water: 0 ? '异常' : '正常',//浸水警报

        fire: 0,//消防警报
        lightning: 0,//雷击警报
        maintainDoor: 0,//维修门状态
        smoke: 0,//烟感警报
        urgencyStop: 0,//急停警报
        water: 0,//浸水警报

      },
      // 点击编辑按钮出现的表单
      formCols2: [

        {
          type: "input",
          label: "设备ID",
          placeholder: "请输入设备id",
          width: 350,
          prop: "deviceNo",
          isDisabled: (e) => {
            // 控制编辑页面的设备id能不能修改，分两种情况，1有id，2没有id，2又有两种情况，新增的要控制设备id的长度，编辑的即使没有不能修改
            if (e.deviceNo) {
              // 这里的if判断是区分在有id的情况下，新增 与编辑的页面，当为新增，可以输入16位，否则就是编辑，就不能修改id
              if (!this.isNewAlarm && e.deviceNo) {
                // this.isNewAlarm = true
                return e.deviceNo.length == 16 ? true : false
              } else {

                return true
              }

            }
            // 排除没有设备id的情况下，打不开编辑按钮
            else {
              // 新增的 ，可以修改id
              if (!this.isNewAlarm) {
                return e.deviceNo.length == 16 ? true : false
              }
              // 编辑的，即使没有id也不能修改
              else {
                e.deviceNo = '-'
                return true
              }

            }
          },
        },
        {
          type: "select",
          label: "消防警报",
          placeholder: "请输入  0代表正常  其他代表异常",
          width: 350,
          prop: "fire",
          options: [{ label: '正常', value: 0 }, { label: '异常', value: 1 }],
        },
        {
          type: "select",
          label: "雷击警报",
          placeholder: "请输入  0代表正常  其他代表异常",
          width: 350,
          prop: 'lightning',
          options: [{ label: '正常', value: 0 }, { label: '异常', value: 1 }],
        },
        {
          type: "select",
          label: "维修门状态",
          placeholder: "请输入  0代表关闭  其他代表开启",
          width: 350,
          prop: "maintainDoor",
          options: [{ label: '关闭', value: 0 }, { label: '开启', value: 1 }],
        },
        {
          type: "select",
          label: "烟感警报",
          placeholder: "请输入  0代表正常  其他代表异常",
          width: 350,
          prop: "smoke",
          options: [{ label: '正常', value: 0 }, { label: '异常', value: 1 }],
        },
        {
          type: "select",
          label: "急停警报",
          placeholder: "请输入  0代表正常  其他代表异常",
          width: 350,
          prop: "urgencyStop",
          options: [{ label: '正常', value: 0 }, { label: '异常', value: 1 }],
        },
        {
          type: "select",//决定是输入框还是下拉框
          label: "浸水警报",
          placeholder: "请输入  0代表正常  其他代表异常",
          width: 350,
          prop: "water",
          // radios: [{ label: '正常', value: 0 }, { label: '异常', value: 1 }],
          options: [{ label: '正常', value: 0 }, { label: '异常', value: 1 }],
        },



      ],

      // 编辑按钮提示框
      formRules2: {
        // id: [{ required: true, message: "请输入设备专属身份ID ~16位数字", trigger: "blur" }],
        deviceNo: [{ required: true, message: "请输入设备id", trigger: "blur" }],
        fire: [{ required: true, message: "请输入消防警报状态 0代表正常", trigger: "blur" }],
        lightning: [{ required: true, message: "请输入雷击警报状态 0代表正常", trigger: "blur" }],
        maintainDoor: [{ required: true, message: "请输入维修门状态 0代表正常", trigger: "blur" }],
        smoke: [{ required: true, message: "请输入烟感警报状态 0=正常  0代表正常", trigger: "blur" }],
        urgencyStop: [{ required: true, message: "请输入急停警报状态  0代表正常", trigger: "blur" }],
        water: [{ required: true, message: "请输入浸水警报状态 0代表正常", trigger: "blur" }],
      },
      // 编辑页面的取消与确认按钮
      formHandle2: [
        {
          label: "取消",
          // handle: (e) => this.elFormVisible("", "elForm2"),
          handle: (e) => {
            console.log(e);
            this.elFormVisible("", "elForm2"),
              this.isNewAlarm = true
            this.init()

          }
        },
        {
          label: "确定",
          type: "success",
          handle: (e) => this.elFormSubmit2(),
        },
      ],
    };
  },

  computed: {},
  mounted() {
    this.init();
    // this.mealExchange_list();
  },
  methods: {
    // 拿到后端返回渲染表格的数据
    async init() {
      let parm = {
        // ...this.searchData,
        // ...{
        //   deviceNo: this.searchData.deviceNo,
        //   pageNum: this.searchData.pageNum,
        //   pageSize: this.searchData.pageSize
        // },
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit,
        },
      };
      let res = await this.apis.getDeviceWarningListss(
        this.tablePage.page, this.tablePage.limit, ...this.searchData
      );
      if (res) {
        this.tableData = res.rows;
        this.tablePage.total = res.total;
      }
    },


    async elFormSubmit() {
      this.formData.state = this.formData.status == true ? 1 : 2;
      if (this.formData.id) {
        let res = await this.api.packupdate(this.formData);
        if (res) {
          this.formData.id = "";
          this.elFormVisible();
          this.init();
        }
      } else {
        let res = await this.api.packadd(this.formData);
        if (res) {
          this.elFormVisible();
          this.init();
        }
      }
    },
    async changestate(row) {
      let res = await this.apis.device_updata({
        id: row.id,
        useStatus: row.useStatus,
      });

      this.$message({
        message: "操作成功！",
        type: "success",
      });
    },
    //新增 修改 按钮  调用的方法
    add(row) {
      console.log(row);
      if (row) {
        this.formData2.id = row.id;
        this.formData2.deviceNo = row.deviceNo;
        this.formData2.maintainDoor = row.maintainDoor;
        this.formData2.lightning = row.lightning;
        this.formData2.fire = row.fire;
        this.formData2.smoke = row.smoke;
        this.formData2.water = row.water;
        this.formData2.urgencyStop = row.urgencyStop;
      }
      // 新增进来打开，全部清空
      else {
        this.formData2.id = "";
        this.formData2.deviceNo = "";
        this.formData2.maintainDoor = "";
        this.formData2.lightning = "";
        this.formData2.fire = "";
        this.formData2.smoke = "";
        this.formData2.water = "";
        this.formData2.urgencyStop = "";

      }

      this.elFormVisible("", "elForm2").then((res) => {
        console.log(res);
      });
    },

    // 编辑按钮出现后的编辑页面的  绑定确认按钮的方法
    async elFormSubmit2() {
      console.log(111111);
      this.$refs.elForm2.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.formData2.id) {
            let res = await this.apis.editDeviceWarning(this.formData2);
            this.$message({
              type: res.code == 200 ? "success" : 'error',
              message: res.msg
            })
            if (res) {
              this.init();
              this.elFormVisible("", "elForm2");
            }
          } else {
            let res = await this.apis.addDeviceWarning(this.formData2);
            this.$message({
              type: res.code == 200 ? "success" : 'error',
              message: res.msg
            })
            if (res) {
              this.init();
              this.elFormVisible("", "elForm2");
            }
          }
        }
      });
    },


    elFormDetail(row) {
      Object.keys(this.formData).forEach((key) => {
        this.formData[key] = row[key];
      });

      this.formData.status = row["state"] == 1 ? true : false;
      this.formData.id = row.id;
      // if (this.formCols[1].label == '登录密码') {
      //     this.formCols.splice(1, 1)
      // }

      this.elFormVisible();
    },

  },
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}

.Tip {
  margin-left: 20px;
}



#r-result {
  width: 100%;
}
</style>
